<!--
 * @Author: yuqy
 * @Date: 2023-04-10 17:30:15
 * @LastEditors: yuqy
 * @LastEditTime: 2023-10-21 14:46:22
 * @Descripttion: -
-->
<script >
  import { createFastboard, mount } from "@netless/fastboard"
  import { ref } from 'vue'
  let fastApp;
  const mountFastboard = async ({ appIdentifier, uid, uuid, roomToken, nickName}) => {
    if (!!fastApp) return;
    const div = document.getElementById("white_board_wrap")
    fastApp = await createFastboard({
      sdkConfig: {
        appIdentifier,
        region: "cn-hz"
      },
      joinRoom: {
        userPayload: {
          nickName,
        },
        uid,
        uuid,
        roomToken,
      },
      managerConfig: {
        cursor: true,
      }
    });
    let MountProps = {
      theme: 'light',
      config: {
        toolbar: {
          apps: {
            enable: false
          }
        }
      }
    }
    window.fastApp = fastApp;
    return mount(fastApp, div, MountProps);
  }
  export default {
    name: 'white_board_wrap',
    props: {
      appIdentifier: String,
      uid: String,
      uuid: String,
      roomToken: String,
      nickName: String,
    },
    setup(){
      // onMounted(() => {
      //   // mountFastboard();
      // })
    },
    created () {},
    async mounted () {
      if (fastApp) {
        await fastApp.destroy();
      }
      let appIdentifier = this.appIdentifier || "3-TYgMU4EeyuEvUxWmBcNg/IolhCHVqFyxqjg";
      let uid = this.uid || parseInt(Math.random() * 100000).toString();
      let uuid = this.uuid || "4463e1b05dbe11ee928e6554980fdf2f";
      let roomToken = this.roomToken || "NETLESSROOM_YWs9X1NReDl6UnhDbzNRbTdHdSZleHBpcmVBdD0xNjk1ODk5ODI2OTYwJm5vbmNlPTM4OWQ0MjViLTE3OTMtNGExYi05OTRkLTc2YTZjYzc3MmRhNyZyb2xlPTAmc2lnPTQyM2YzMWZlOTdiZWE5YjEyZGIwYzlmNDQwMWMzMjkxNzU5YjZhNWI3M2UyMWI5ZTlhYzgzM2M0ZGEzZGU3MjgmdXVpZD00NDYzZTFiMDVkYmUxMWVlOTI4ZTY1NTQ5ODBmZGYyZg";
      let nickName = this.nickName;
      mountFastboard({ appIdentifier, uid, uuid, roomToken, nickName });
    },
    unmounted() {
      if (fastApp) {
        // 退出 Fastboard (从白板房间断开)
        fastApp.destroy();
        fastApp = null;
      }
    },
    methods: {
      // 禁止书写
      wirteDisable () {
        fastApp.room.setWritable(false)
      },
      getUserList () {
        // let lsit = fastApp.room.state.roomMembers
        // console.log(fastApp)
        // for (var member of list) {
            // 读取房间内某个用户的 userPayload 字段
            // console.log(member.userPayload);
        // } 
      }
    },
    
  }
</script>
<template>
  <div class="white_board_wrap" id='white_board_wrap' />
</template>
<style>
:root{
  --fastboard-active-color: #fe6400;
}
.netless-whiteboard {
  background: #fff;
}
</style>
<style scoped>
.read-the-docs {
  color: #888;
}
h1 {
  padding: 100px 0;
  color: #000;
  font-size: 48px;
}
.white_board_wrap {
  height: 100vh;
  background: #333;
}
</style>
